<template>
    <div class="main">
        <div v-if="page == 0">
            <introduce-vue></introduce-vue>
        </div>
        <div v-if="page == 1" class="access">
            <div class="title">在这3个人中，只有一个人说实话，帮忙找到这个人</div>

            <div class="person one" :class="[choosed == '小明' ? 'active-person' : '']" @click="choosePerson('小明')">
                <el-image :src="require('./../../../assets/man-1.png')"></el-image>
                小明
            </div>
            <div class="dialog dialog-one">
                <div class="rectangle rec-left"></div>
                胡说，阿珍，是胖虎，胖虎在撒谎
            </div>
            <div class="person two" :class="[choosed == '阿珍' ? 'active-person' : '']" @click="choosePerson('阿珍')">
                <el-image :src="require('./../../../assets/woman-1.png')"></el-image>
                阿珍
            </div>
            <div class="dialog dialog-two">
                <div class="rectangle rec-right"></div>
                小明，现在我知道你说谎了
            </div>
            <div class="person three" :class="[choosed == '胖虎' ? 'active-person' : '']" @click="choosePerson('胖虎')">
                <el-image :src="require('./../../../assets/man-2.png')"></el-image>
                胖虎
            </div>
            <div class="dog">
                <el-image :src="require('./../../../assets/dog.png')"></el-image>
            </div>
            <div class="dialog dialog-three">
                <div class="rectangle rec-left"></div>
                真讨厌！你们俩才撒谎了呢，我可是无辜的，理由只有一个，旺财（狗）和我正往家走！
            </div>

            <div class="result">
                <div class="choose-person">你选择的人是(点击选中)：<span>{{ choosed }}</span></div>
                <el-button size="mini" @click="nextAss()">结束,下一项</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import introduceVue from '../com/introduce.vue';
import { LogicCalc } from './../../../api/access';


export default {
    name: "LogicIndex",
    data: function () {
        return {
            page: 1,
            choosed: null,
        }
    },
    components: {
        introduceVue,
    },
    methods: {
        choosePerson: function (val) {
            if (this.choosed == val) {
                this.choosed = null;
            } else {
                this.choosed = val
            }
        },
        nextAss: function () {
            if (this.choosed == null) {
                this.$message("尚未进行选择");
            } else {
                let score = 0;
                if(this.choosePerson=='小明'){
                    score = 1;
                } else if(this.choosePerson == '阿珍'){
                    score = 2;
                }
                LogicCalc({
                    uid: this.$store.state.User.uid,
                    score: score
                }).then(res => {
                    if (res.rescode == 200) {
                        this.$emit("nextAss");
                    }
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.access {
    width: 100;

    .title {
        font-weight: bold;
        font-size: 1.1em;
        color: #5b53ec;
    }


    position: relative;

    .person {
        width: 200px;
        height: 200px;
        position: absolute;
        cursor: pointer;
        font-weight: bold;
        font-size: 1.2em;
    }

    .active-person {
        text-shadow: 1px 1px 2px black,
            0 0 25px blue,
            0 0 5px darkblue;
    }

    .dog {
        width: 180px;
        height: 180px;
        position: absolute;
        left: 120px;
        top: 360px;
    }

    .one {
        left: 240px;
        top: 20px;
    }

    .two {
        right: 220px;
        top: 110px;
    }

    .three {
        left: 240px;
        top: 300px;
    }

    .dialog {
        position: absolute;
        width: 200px;
        height: 120px;
        border: 2px solid #5b53ec;
        border-radius: 20px;
        font-size: 1.4em;
        font-weight: bold;
        box-sizing: border-box;
        padding: 20px 10px;

        .rectangle {
            position: absolute;
            left: -40px;
            top: 60px;
        }

        .rec-left {
            width: 0;
            height: 0;
            border: 20px solid;
            border-color: transparent #5b53ec transparent transparent;
        }

        .rec-right {
            width: 0;
            height: 0;
            border: 20px solid;
            border-color: transparent transparent transparent #5b53ec;
            left: 198px;
        }
    }

    .dialog-one {
        left: 440px;
        top: 60px;
    }

    .dialog-two {
        right: 420px;
        top: 150px;
    }

    .dialog-three {
        left: 440px;
        top: 340px;
        width: 260px;
        height: 140px;
    }
}

.result {
    margin-top: 360px;
    margin-left: 260px;

    .choose-person {
        font-weight: bold;
        font-size: 1.2em;
        color: #8b86e8;
        margin-left: 40px;
        margin-top: 60px;
        margin-bottom: 40px;

        span {
            font-size: 1.3em;
            color: #5b53ec
        }
    }
}
</style>